import Vue from 'vue'
import VueRouter from 'vue-router'
// import login from '../views/login'
// import layout from '../views/layout'
// import notfound from '../views/notfound'
// import welcome from '../views/layout/welcome'
// import chart from '../views/layout/chart'
// import user from '../views/layout/user'
// import enterprise from '../views/layout/enterprise'
// import question from '../views/layout/question'
// import subject from '../views/layout/subject'
import { getToken } from '@/utils/token'

// 下面是测试代码，写完之后，把它注释掉
// import defaultslot from '@/test/default/parent'
// import nameslot from '@/test/name/parent'
// import scopeslot from '@/test/scope/parent'

Vue.use(VueRouter)

// 路由懒加载
const login = () => import('../views/login')
const layout = () => import('../views/layout')
const notfound = () => import('../views/notfound')
const welcome = () => import('../views/layout/welcome')
const chart = () => import('../views/layout/chart')
const user = () => import('../views/layout/user')
const enterprise = () => import('../views/layout/enterprise')
const question = () => import('../views/layout/question')
const subject = () => import('../views/layout/subject')

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: login,
    meta: {
      title: '登录'
    }
  },
  {
    path: '/layout',
    name: 'Layout',
    component: layout,
    meta: {
      roles: ['超级管理员', '管理员', '老师', '学生']
    },
    redirect: '/layout/welcome',
    // 嵌套路由：https://router.vuejs.org/zh/guide/essentials/nested-routes.html
    children: [
      {
        path: '/layout/welcome', // 如果你非得写/，那就写全覆盖/layout
        component: welcome,
        // 路由元信息，我们可以如下理解，就是给我们每个路径设置一些额外的数据
        meta: {
          path: '/layout/welcome', // 点击之后，跳转的路径
          title: '欢迎登录', // 菜单项的名字
          icon: 'el-icon-sunny', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师', '学生'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: '/layout/chart', // 如果你非得写/，那就写全覆盖/layout
        component: chart,
        // 路由元信息，我们可以如下理解，就是给我们每个路径设置一些额外的数据
        meta: {
          path: '/layout/chart', // 点击之后，跳转的路径
          title: '数据预览', // 菜单项的名字
          icon: 'el-icon-pie-chart', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: 'user', // 如果你写的只有一级，前面不要加/
        component: user,
        meta: {
          path: '/layout/user', // 点击之后，跳转的路径
          title: '用户列表', // 菜单项的名字
          icon: 'el-icon-user', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: 'enterprise', // 如果你写的只有一级，前面不要加/
        component: enterprise,
        meta: {
          path: '/layout/enterprise', // 点击之后，跳转的路径
          title: '企业列表', // 菜单项的名字
          icon: 'el-icon-office-building', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: 'question', // 如果你写的只有一级，前面不要加/
        component: question,
        meta: {
          path: '/layout/question', // 点击之后，跳转的路径
          title: '题库列表', // 菜单项的名字
          icon: 'el-icon-edit-outline', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师', '学生'] // 哪些角色可以看到我们该菜单项
        }
      },
      {
        path: 'subject', // 如果你写的只有一级，前面不要加/
        component: subject,
        meta: {
          path: '/layout/subject', // 点击之后，跳转的路径
          title: '学科列表', // 菜单项的名字
          icon: 'el-icon-notebook-2', // 菜单项的icon
          roles: ['超级管理员', '管理员', '老师'] // 哪些角色可以看到我们该菜单项
        }
      }
    ]
  },
  {
    path: '/',
    redirect: '/login'
  },
  // {
  //   path: '/test',
  //   // component: defaultslot
  //   // component: nameslot
  //   component: scopeslot
  // },
  {
    path: '*',
    component: notfound
  }
]

const router = new VueRouter({
  routes
})

// 使用全局前置守卫，实现权限控制
// 该函数只要有路由跳转，就会执行
/**
 * to：要访问/跳转的页面
 * from：上一个页面
 * next：控制你是否有权限继续跳转下去，还可以决定你究竟跳转到哪里去
 *
 * 注意：next无论是否有权限，最终都需要调用它，只是说如果有权限则`next()`，如果没有权限则`next('/login')`
 */
router.beforeEach((to, from, next) => {
  // console.log(to)
  // console.log(from)
  // console.log(next)

  if (to.path === '/login' || to.path === '/test') {
    // 不需要权限就可以访问的路由
    next()
  } else {
    // 这里的是需要权限控制的
    const token = getToken()
    if (token) {
      // 有权限就继续访问
      next()
    } else {
      // 没有权限则调回登录页面
      next('/login')
    }
  }
})

/**
 * 后置守卫
 * 已经进入到该页面之后，就会执行
 */
router.afterEach((to, from) => {
  // console.log('afterEach---', to)
  document.title = to.meta.title || '黑马面面'
})

export default router
